{{-- 引入布局文件 --}}
@layout('layouts/app')

{{-- 内容 --}}
@section('body')
  <div class="home-page">
    {{-- 滑动广告图 --}}
    <div class="banner">
      <div class="container">
        <h1 class="logo-font">conduit</h1>
        <p>A place to share your knowledge.</p>
      </div>
    </div>
    {{-- 分页区域 --}}
    <div class="container page">
      <div class="row">
        <div class="col-md-9">
          <div class="feed-toggle">
            <ul class="nav nav-pills outline-active">
              @if(auth.isLoggedIn)
                <li class="nav-item">
                  {{-- 这里使用了路由，使用助手函数route，然后参数使用双花括号解析 --}}
                  <a class="nav-link {{ followFeed ? 'active' : '' }}" href="{{ route('articles.index', {}, { qs: { filterBy: 'following' }}) }}">Your Feed</a>
                </li>
              @endif

              <li class="nav-item">
                <a class="nav-link {{ !selectedTag && !followFeed ? 'active' : ''}}" href="{{ route('articles.index') }}">Global Feed</a>
              </li>
              {{-- 这里使用了if逻辑判断 --}}
              @if(selectedTag)
                <li class="nav-item">
                  <span class="nav-link {{ selectedTag ? 'active' : ''}}">#{{ selectedTag }}</span>
                </li>
              @endif
            </ul>
          </div>
          {{-- 这里使用了文章的列表组件 --}}
          @!articles.list({ articles })
          {{-- 这里使用了分页组件 --}}
          @!pagination({ collection: articles })
        </div>

        {{-- 最受欢迎的标签 --}}
        <div class="col-md-3">
          <div class="sidebar">
            <p>Popular Tags</p>

            <div class="tag-list">
              {{-- 这里使用了循环标签 --}}
              @each(tag in tags)
                <a aria-label="view articles tagged as {{ tag.value }}" href="{{ route('articles.index', {}, { qs: { filterBy: 'tag', tag: tag.value } }) }}" class="tag-pill tag-default">
                  {{ tag.value }}
                </a>
              @end
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@end
